Tuesday, 22 June 2021

Tutorial Finals


MY TUTORIAL


Posted by at No comments:

Thursday, 17 June 2021

Compilation of Activities (FINAL)

​
Home
Instagram
Exercise 7 Exercise 8
Exercise 6 Exercise 7 Exercise 8
Exercise 10 Exercise 11 Exercise 12
Exercise 10 Exercise 11 Exercise 12 Exercise 13

COMPILATION OF ACTIVITIES

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">



<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

   

    <link rel="stylesheet" href="Exercise 8 CSS Side bar navigation.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <script>

      $(document).ready(function(){

        $('i').click(function(){

          $('ul').toggleClass('ul_show');

          $('section').toggleClass('slide_image');

        });

        $('li').click(function(){

          $(this).addClass('active').siblings().removeClass('active');

        });

      });



    </script>



  </head>

  <body>

    <ul>

<li class="active"><a href="#">Home</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#profile">Profile</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#link">Link</a></li>

</ul>

<section>

      <i class="fas fa-bars"></i>

      <div class="sec1">

</div>

<h2 id="Home">

Home</h2>
<H1>Hi my name is Excekel Cabarloc I'm a Freelance Videographer and Graphic Designer</h1>

<div class="sec2">

</div>

<h2 id="portfolio">

Portfolio</h2>

<p>

 </p>
  <div id="imagelist">
  <a href="https://ibb.co/C89WTMD"><img src="https://i.ibb.co/8sxXSdt/DEADSKULL.png" alt="DEADSKULL" border="0" height="300" width="auto"></a>
   <a href="https://ibb.co/r7qRrps"><img src="https://i.ibb.co/Rvtkw6y/ANDROID.png" alt="ANDROID" height="300" width="auto"></a>
    <a href="https://ibb.co/0yJPR0B"><img src="https://i.ibb.co/TMhzxQK/HOPE.png" alt="HOPE" border="0" height="300" width="auto"></a>
   <a href="https://ibb.co/bsyfWy1"><img src="https://i.ibb.co/y6M3fM0/SPACE.png" alt="SPACE" border="0" height="300" width="auto"></a>

<div class="sec3">

</div>

<h2 id="profile">

Profile</h2>

<p>HI! I'm <h1>Excekel Cabarloc</h1><br> Aspiring Videographer and Graphic Designer, I'm currently 3rd year Multimedia Arts student in University of Perpetual Help Molino. </p><br>
  <li> Digital arts
  <p>I make my own digital art and vector art I posted it on my instagram account</p>
 <li> Photography
  <p> Itake pictures in event like Debut and Wedding</p><br>
<li> Video and Film Productions
  <p> I have some short film in my youtube channel</p><br>
    
    
    

<div class="sec4">

</div>

<h2 id="contact">

Contact</h2>

<h2>You Can contact me Via Instagram: KVNFVZED </h2>

<div class="sec5">

</div>

<h2 id="link">

link</h2>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons -->
<a href="#" class="fa fa-youtube"></a>
...
          <p> <a 
<div class="sec6">

</div>

</div>

</section>



  </body>

</html>
Posted by at No comments:

Exercise 13: Login & Signup Forms

 

HTML
(LOGIN HTML)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login and Signup </title>
<link rel="stylesheet" href="loginnn CSS.css">
</head>

<body>

<form name="form">
<h2>Login</h2>
<p> Log in to Kelly Artwork. </p>
<div>
<label for="text"> <b> Username </b> </label>
<input  id="user"  name="user" type="text" placeholder="Username"> </div>
</div>
<div>
<label for="psw"> <b> Password </b> </label>
<input id="pass" name="pass" type="password"  placeholder="Password"> </div>
</div>
<div>
<button type="button" value="Login" onClick="validate(this.form)"> Login </button>
<button class="resetbtn" type="Reset"> Reset </button>
<hr>
<p> Don't have an account? <br> Sign up now! </p>
<a href="signuppp.html"> Sign Up </a>
</div>
</form>

<script src="login singup jv.js">

</script>

</body>
</html>

(LOGIN CSS)
body {
font-size: 18px;
background: #dbd9d9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}

h2 {
text-align: center;
text-decoration: underline;
}

input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

button {
background-color: dodgerblue;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

form {
width: 300px;
background: #fff;
padding: 0px 40px 40px;
border: 1px solid #ccc;
margin: 1.5% auto auto auto;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 5px
}

label i {
color: #999;
font-size: 80%;
}

input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}

.cancelbtn, .resetbtn {
padding: 14px 20px;
background-color: #f44336;
}

.cancelbtn, .signupbtn {
width: 100%;
}

.container {
width: 300px;
background: #fff;
padding:0px 40px 40px;
border: 1px solid #ccc;
margin: 0px auto 0;
border-radius: 5px;
}

.modal {
display: none;
position: fixed;
background-color: #fff;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: 30px 0px 30px 0px;
}

.modal-content {
background-color: #fefefe;
margin: 1% auto auto auto;
border: 1px solid #888;
width: 80%;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
 
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #5c5c5c;
}

.close:hover,
.close:focus {
color: #000;
cursor: pointer;
}

.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}

.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}

.error {
color: red;
font-size: 90%;
}

@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}

(SIGNUP HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login and Signup </title>
<link rel="stylesheet" href="signuppp CSS.css">
</head>

<body>

<div id="signup-form" class="modal">
<form class="modal-content" onsubmit="return signup()">
<div class="container">
<h2> Sign Up </h2>
<p> Fill up this form to create your own account. </p>
<hr>
<label> <b>Username</b> </label>
<input id="username-input" type="text" placeholder="Enter Username" name="user" required>

<label> <b>Password</b> </label>
<input id="password-input" type="password" placeholder="Enter Password" name="pass" required>

<label> <b>Confirm Password</b> </label>
<input id="confirm-password-input" type="password" placeholder="Confirm Password" name="confirmPass" required>
<button type="submit" class="signupbtn"> Submit </button>
<button class="resetbtn" type="Reset"> Reset </button>
<a href="loginnn.html"> Back to Login </a>
</div>
</form>
</div>

</body>

<script src="login signup jv.js">

</script>

</html>

(SIGNUP CSS)
body {
font-size: 16px;
background: #dbd9d9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
}

h2 {
text-align: center;
text-decoration: underline;
}

input[type=text],
input[type=password],
input[type=confirm-password-input] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=confirm-password-input]:focus. {
background-color: #ddd;
outline: none;
}

button {
background-color: dodgerblue;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

form {
width: 300px;
background: #fff;
border: 1px solid #ccc;
margin: 1.5% auto auto auto;
border-radius: 5px;
}

label {
display: block;
margin-bottom: 5px
}

label i {
color: #999;
font-size: 80%;
}

input,
select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}

.cancelbtn,
.resetbtn {
padding: 14px 20px;
background-color: #f44336;
}

.cancelbtn,
.signupbtn {
width: 100%;
}

.container {
width: 300px;
background: #fff;
padding:0px 40px 40px;
border: 1px solid #ccc;
margin: 0px auto 0;
border-radius: 5px;
}

.modal {
display: block;
position: fixed;
background-color: #fff;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: 30px 0px 30px 0px;
}

.modal-content {
background-color: #fefefe;
margin: 1% auto auto auto;
border: none;
width: 80%;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
 
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #5c5c5c;
}

.close:hover,
.close:focus {
color: #000;
cursor: pointer;
}

.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}

.form-inline label,
.form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}

.error {
color: red;
font-size: 90%;
}

@media screen and (max-width: 300px) {
.cancelbtn,
.signupbtn {
width: 100%;
}
}

(JAVA)

function validate(form) {


var credentials = JSON.parse(window.name);

var usernameInput = document.getElementById("user").value;

var passwordInput = document.getElementById("pass").value;

var matchingCredential = credentials.find(x => x.username == usernameInput);

if (matchingCredential == undefined) {

alert('No such user');

return;

}

if (matchingCredential.password == passwordInput) {

alert('Login Successful');

window.location.href = "https://kekelcabarloc.blogspot.com/";

}

else {

alert('No such credential');

}

}

var credentials = [];


function signup() {


var passwordPassesCriteria = false;

var passwordMatched = false;

var usernameInput = document.getElementById('username-input').value;

var passwordInput = document.getElementById('password-input').value;

var confirmPasswordInput = document.getElementById('confirm-password-input').value;

passwordMatched = passwordInput == confirmPasswordInput;

var regex = /^[a-zA-Z\s]+$/;

passwordPassesCriteria = regex.test(passwordInput);

console.log(saveCredentials);

if (passwordMatched && passwordPassesCriteria) {

displayFormData(usernameInput, passwordInput);

saveCredentials();

goToLogin();

}

}


function saveCredentials() {


var username = document.getElementById('username-input').value;

var password = document.getElementById('password-input').value;

credentials.push({

username: username,

password: password

});

var objectAsString = JSON.stringify(credentials);

    window.name = objectAsString;

}


function displayFormData(username, password) {

var alertMessage = 'Username: ' + username + '\n' +

'Password: ' + password;

alert(alertMessage);

}


function goToLogin() {

window.location.href = 'loginnn.html';

}


function goToSighUp() {

window.location.href = 'signuppp.html';

}

Posted by at No comments:

Tuesday, 15 June 2021

Exercise 12: Chat Box

 

HTML 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Message Box </title>
<link rel="stylesheet" href="Exercise 012 Chat box css.css">
</head>

<body>

<section>

<h1> Click the Chat Button </h1>
<button class="chat-btn"> <b> CHAT </b> </button>
<div id="chat-container" onclick="changeColor()" class="chat-popup">
<div class="chat-area">
<div class="income-msg">
<img src="https://i.ibb.co/6Js3nC3/10.png" class="kelly" alt="Kelly">
<span class="msg"> kelly: Zup? </span>
</div>
</div>
<div class="input-area">
<input id="name-input" type="name" size="10" style="margin-right:8px;" placeholder="Type your name">
<input id="message-input" type="text" placeholder="Type your message here">
<input type="color" id="colorpicker" class="colors" value="#C7C7C7">
<button class="submit"> SEND </button>
</div>
</div>
</section>

<script src="Exercise 012 Chat box js.js"> </script>

</body>
</html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

button {
border: none;
outline: none;
cursor: pointer;
}

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #00ffcc;
display: flex;
justify-content: center;
height: 100vh;
width: 100%;
}

section {
max-width: 1100px;
margin: auto;
text-align: center;
padding: 0 1.5rem;
}

h1 {
font-size: 3rem;
margin-bottom: 2rem;
}

.chat-btn {
position: fixed;
right: 50px;
bottom: 50px;
background: white;
color: black;
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 0.8;
transition: opacity 0.3s;
box-shadow: 0 5px 5px rgba(0,0,0,0.4);
}

.chat-btn:hover, .submit:hover, .colors:hover {
opacity: 1;
}

.chat-popup {
display: none;
position: fixed;
bottom: 80px;
right: 120px;
height: 400px;
width: 425px;
background-color: #009dff;
flex-direction: column;
justify-content: space-between;
padding: 0.75rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
border-radius: 10px;
}

.show {
display: flex;
}

.chat-area{
height: 80%;
overflow-y: auto;
overflow-x: hidden;
}

.income-msg {
display: flex;
align-items: center;
}

.kelly {
width: 60px;
height: 60px;
border-radius: 80%;
object-fit: cover;
}

.income-msg .msg {
background-color: white;
color: black;
padding: 0.6rem;
border-radius: 8px;
margin-left: 1rem;
box-shadow: 0 2 5px rgba(0,0,0,0.4);
border: 1px solid gray;
}

.input-area {
position: relative;
display: flex;
justify-content: center;
}

input [type="text"], input [type="name"] {
width: 100%;
border: 1px solid #ccc;
font-size: 1rem;
border-radius: 5%;
height: 2.2rem;
padding: 2px;
}

.colors {
margin-left: 0.5rem;
background-color: white;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
opacity: 0.7;
}

.submit {
padding: 0.25rem 0.5rem;
margin-left: 0.5rem;
background-color: white;
color: black;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
border: 1px solid gray;
opacity: 0.7;
}

.out-msg {
display: flex;
justify-content:flex-end;
align-items: center;
}

.my-msg {
display: flex;
justify-content: flex-end;
margin: 0.75rem;
padding: 0.6rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px, 5px rgba (0,0,0,0.4);
border: 1px solid gray;
word-break: break-all;
}

@media (max-width:500px){
.chat-popup{
bottom: 120px;
right: 10%;
width: 80vw;
}
}

JS

const popup = document.querySelector('.chat-popup');
const chatBtn = document.querySelector('.chat-btn');
const submitBtn = document.querySelector('.submit');
const chatArea = document.querySelector('.chat-area');
const inputElm = document.querySelector('input');
const nameInput = document.getElementById('name-input');
const messageInput = document.getElementById('message-input');

chatBtn.addEventListener('click', ()=>{
popup.classList.toggle('show');
})

function changeColor() {
document.getElementById("chat-container").style.backgroundColor = 
document.getElementById("colorpicker").value;
}

submitBtn.addEventListener('click', ()=>{
let name = nameInput.value;
let message = messageInput.value;
let temp =
`<div class="out-msg">
<span class="my-msg">${name}: ${message}</span>
<img src="https://i.ibb.co/6Js3nC3/10.png"class="kelly" 
</div>`;
chatArea.insertAdjacentHTML("beforeEnd", temp);
nameInput.value = '';
messageInput.value = '';
})
Posted by at No comments:

Exercise 11 Counting Game

Counting Game

Let's Play!

Let's count the shapes you see on the screen!

Score:

0

Posted by at No comments:

Exercise 10 Drawing in Canvas

Exercise 10 Drawing in Canvas
Posted by at No comments:
Subscribe to: Posts (Atom)