loading...
Cover image for DAY 1 : little webapp

DAY 1 : little webapp

amirdarx profile image amir Updated on ・3 min read

hiiiii

after 10 hours , finally i made it
let's go and look at what did i do

Alt Text

  • 1 > first of all (html)
<!DOCTYPE html>
<html>

<head>
    <title>D.A.R.K</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body id="gradient">


    <h1>background generator</h1>
    <input type="color" class="color1" name="color1" value="#ff0000">
    <input type="color" class="color2" name="color2" value="#0000ff"> <br> <br>
    <input type="number" class="number" name="number">
    <h2>current css background</h2>
    <h3></h3>
    <div class="y">
        <div class="x1">01</div>
        <div class="x2">02</div>
    </div>

</body>
    <script type="text/javascript" src="index.js"></script>

</html>

in part one that is html , i made 3 input tag and one h3 tag to get and set the linear-gradient .

2 of inputs is ( color input ) for taking color and the another one is ( number input ) for taking number to set degree of linear-gradient.

finally i put sourcecode of linear-gradient in h3 tag to everyone can use it.

  • 2 > second (css)
body{
    font: 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    top: 15%;
    background: linear-gradient(0deg, red, blue);
    height: 100vh;
}

h1{
    font: 600 3.5em 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    width: 100%;
}

h3{
    font: 600 1em 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: none;
    letter-spacing: .1em;
}

.number{
    outline: none;
    padding: 5px 10px;
    border-radius: 50px;
}


.number:focus{
    transition: .5s;
    background-color: #000;
    color: #fff;
}

.number:not(focus){
    transition: .5s;
    background-color: #fff;
    color: #000;
}

.y{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
}

.x1{
    border: 2px solid black;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
}

.x2{
    border: 2px solid black;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
}

@media screen and (max-width: 800px){
    h1{
        font: 600 2.5em 'Raleway', sans-serif;
    }
}

@media screen and (max-width: 600px){
    h1{
        font: 600 1.5em 'Raleway', sans-serif;
    }
}

here in the css part i setted stylesheet for html

  • 3 > last part (js)

in this section i connect it to the html and it was the hardest one .

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var grad = document.querySelector(".number");
var gr = 0 ;


var h1 = document.querySelector("h1");
var col1 = document.querySelector(".x1");
var col2 = document.querySelector(".x2");
let style = `linear-gradient(0deg, rgb(255,0,0), rgb(0,0,255)`;
body.style.backgroundImage = style;
css.textContent = body.style.backgroundImage + ";";

function setGradient(){
    col1.style.background = color1.value;
    col1.textContent = color1.value;
    col1.style.color = color2.value;
    col1.style.border = " 2px solid " + color2.value;
    col2.style.background = color2.value;
    col2.textContent = color2.value;
    col2.style.color = color1.value;
    col2.style.border = " 2px solid " + color1.value;
    h1.style.color = color2.value;
    h1.style.color = color1.value;

    style = `linear-gradient(0deg, ${color1.value}, ${color2.value}`;
    body.style.backgroundImage = style;

    if(grad.value!=0){
        style = `linear-gradient(${grad.value}deg, ${color1.value}, ${color2.value}`;
        body.style.backgroundImage = style;
    }
    css.textContent = body.style.backgroundImage + ";";
}

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
grad.addEventListener("input", setGradient);

and in the last part which is adjusting js and DOM .
and at the end i had to took value of input to put it in the style.

it's a background-generator.

and in this little webapp i used

  • 1 : html 18%
  • 2 : css 42%
  • 3 : js 40%

although it was so hard to tackle with DOM but in the end i really have good feelings and i enjoyed it .
and i hope you enjoy : )

and at the end i published it in github

Click here to see my work in github

i will be happy for giving any suggestion and revealing my mistakes .

Posted on by:

amirdarx profile

amir

@amirdarx

just a self learner yet :)

Discussion

markdown guide
 

Heya bro
such a great writer you are!
tnx for walking with me in this road!(ya know what do I mean)
Keep it up with this kind of great post.

Keep Moving Forward

Code with 💛

🅑🅐🅝🅙🅘