Compilation of Finals Part 1

 Drawing on a Canvas

To make your HTML Code act like a canvas you must first use 

<canvas id="MyCanvas" width="1080" Height="720" 

style="border:1px solid #4f1802 ;">


To Establish a canvas, i chose the standard 1080, 720px resolution.
once the canvas has been established, you can now draw on it.


var canvas = document.getElementById("MyCanvas");

var ctx = canvas.getContext("2d");

ctx.globalAlpha = 1


Is also the ID if your canvas, to make it identify as a Canvas.


        ctx.fillStyle = "#a6471e";

ctx.fillRect(500,110,280,350);

ctx.fillStyle = "#fac087";

ctx.fillRect(480,100,230,300);

ctx.fillStyle = "#17fc03";

ctx.fillRect(500,50,300,50);


Each one acts as a layer, the one on top is the top layer so it will cover everything underneath it.


Counting Drill



To establish the UI or Fieldset first you need to do

 <canvas id="myCanvas" width="1200" height="300" style="border:none;">

    </canvas>


    <label> How many shapes do you see? </label>

    <input type="number" id="answer"> </input>


    <!-- <button id="colors" onclick="colors()" > Colors </button> -->

    <button id="eraser" onclick="eraser()" > Next </button>

    <button id="compare" onclick="compare();eraser()" > Answer </button>


    <p> <b>    Score: </b> </p> <div id="myScore"> 0 </div>


    <p id="demo"> </p>


This establishes the UI where you can make the Counting Game

then for the game to work, we add the script.


<script type = "text/javascript">

    var score=0;

    function colors()

    {

        var canvas = document.getElementById("myCanvas");

        var ctx = canvas.getContext("2d");

        x=Math.round(Math.random()*10+1);

        for(f=1; f<=x;f++)

        {

switch(f)

            {

                case 1: c="#ff2a00"; break

                case 2: c="#ff2a00"; break

                case 3: c="#ff2a00"; break

                case 4: c="#ff2a00"; break

                case 5: c="#ff2a00"; break

                case 6: c="#ff2a00"; break

                case 7: c="#ff2a00"; break

                case 8: c="#ff2a00"; break

                case 9: c="#ff2a00"; break

                case 10: c="#ff2a00"; break (these cases are the squares you need to count as they appear on screen)

            }


            ctx.font = "20px Calibri";


            ctx.fillStyle=c;

            ctx.fillRect(10+f*100,100, 50, 50);

        }

    }


  function eraser()

    {

        var canvas = document.getElementById("myCanvas");

        var ctx = canvas.getContext("2d");

        ctx.clearRect(0,0,1200,300); 

        colors();

    }


    colors()


    function compare()

    {

        ans=document.getElementById("answer").value


        if (ans==x)    {

            score += 1;

            document.getElementById("myScore").innerHTML=score.toString()

            document.getElementById("demo").innerHTML="Hooray! You are correct! "

        }

        else {

            document.getElementById("demo").innerHTML="Sorry, you are wrong..."

        }

    }


</script>


With this the script will now work and you can play the counting game as the video shows


Chat Box


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

<body>

<section>

<h1> Click Button to start Chatting </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://a.furaffinity.net/1546097473/somniumfox.gif" class="dan" alt="Dan">
<span class="msg"> Dan: Whaddya want? </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="Chat Box Script.js"> </script>

</body>
</html>

This part is the html part of the Chat box, just the barebones and it doesn't have a script, the highlighted colors are where the magic happens,  so let's go to the Script first, because that's the most important one out of all after all

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://pbs.twimg.com/profile_images/1403166947563376641/i3mGk01H_400x400.jpg" class="dan">
</div>`;
chatArea.insertAdjacentHTML("beforeEnd", temp); 
nameInput.value = '';
messageInput.value= '';

})
This is where the magic happens, everything here makes the chat box functional
and it uses the .js as the extension to tell the program that this is a script that can be used not in only one file but in multiple files.

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

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

body { 
font-family: Arial, Helvetica, sans-serif;
background-color: #e5e5e5;
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: 2m;
}

.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: #C7C7C7;
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;
}

.dan {
width: 45px;
height: 45px;
border-radius: 50%;
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;
}
}
While everything in this section is practically all for looks and show, hence why the file name has the css extension, CSS is much better at designs than html.


Comments

Post a Comment

Popular posts from this blog

Animation Transition Activity

<!DOCTYPE html> <html> <head> Animation   <style>  div {   width: 2000px;   height: 100px;   background-color: pink;   animation-name: example;   animation-duration: 10s; } } </style> </head> <body> <div><h1><center> Welcome!</center></h1></div> Cryptocurrencies such as ether and dogecoin have surged to highs that few investors would have predicted a year ago. The furious run has even the most optimistic traders asking: Can it last? The forces underpinning the crypto mania mirror those that saw GameStop Corp. shares tear higher earlier this year. Excess money from stimulus checks aimed at helping the most vulnerable make rent has also found its way to brokerage accounts that offer free trading. Meanwhile, people globally have spent more time at home and in front of screens as the pandemic shut businesses.Cryptocurrencies such as ether and dogecoin have surged to highs th...
Read more

Adding A Youtube Link Embed

 <!DOCTYPE html> <html> <head> Animation   <style>  div {   width: 2000px;   height: 100px;   background-color: pink;   animation-name: example;   animation-duration: 10s; } @keyframes example {   from {background-color: red;}   to {background-color: blue;} } </style> </head> <body> <div><h1><center> Welcome!</center></h1></div> Cryptocurrencies such as ether and dogecoin have surged to highs that few investors would have predicted a year ago. The furious run has even the most optimistic traders asking: Can it last? The forces underpinning the crypto mania mirror those that saw GameStop Corp. shares tear higher earlier this year. Excess money from stimulus checks aimed at helping the most vulnerable make rent has also found its way to brokerage accounts that offer free trading. Meanwhile, people globally have spent more time at home and in front of screens...
Read more

let's talk about Sketches

Who doesn't love sketches? they look messy but that's what's great about it! the fact that it looks so good without uniformed lines is what's fascinates me, either that or the other kind of sketches i see is when it's drawn on paper and it's usually consisted of portraits and other forms of realistic faces. For me as a cartoonist, sketches is where the drawing begins, the point a to point z, i can't do a drawing without making the proper sketch fundamentals of construction and proportions. without sketches, my drawings would actually be horribly anatomically wrong and that's not ok! You have seen those tutorials in how to draw where they start with simple shapes then in the next step it's already a face that you wanted to know how to do that process but you've been denied of it? Basically they want to teach you about how to use the constructions, nearly every drawings i work on, starts with a circle with a cross in the face, 2 circles for eyes...
Read more