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