## HTML

### Form

<form action="text.php" method="GET">
    <label>Name</label>
    <input type="text" placeholder="Name" name="name" required autofocus>

    <label for="email">Email</label>
    <input id="email" type="email" placeholder="Email" name="email" required>

    <label>Password</label>
    <input 
        type="password" 
        placeholder="Password" 
        name="password" 
        minlength="7" 
        maxlength="15" 
        required
    >

    <input type="submit" value="Send">
    <input type="reset">

    <label>number</label>
    <input type="number" min="0" max="10" step="2">
</form>

### date, file, url, search,

<form>
    <input type="date">

    <label>Upload</label>
    <input type="file" required>

    <label>Url</label>
    <input type="url" />

    <label>Search</label>
    <input type="search" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Save" />
</form>

input[type=url] {
    background-color: cadetblue;
    border: none;
}

<br >

> **Properties for CSS Form: Learn to Style HTML Input Forms**
> https://www.bitdegree.org/learn/css-form#:~:text=Selecting%20Input%20Type,form%20fields%20that%20accept%20numbers.

<br>

### Radio

<form action="">
    <h1>Radio buttons</h1>
    <div>
        <input type="radio" name="gender" value="male" checked>
        <label for="">male</label>
    </div>
    <div>
        <input type="radio" name="gender" value="female" id="">
        <label for="">female</label>
    </div>
    <br>
    <input type="submit">
</form>

### checkbox

<form>
    <h1> Programming Languages: </h1>
    <br>
    <input type="checkbox" id="C" name="C" value="C" />
    <label for="C">C</label> <br>

    <input type="checkbox" id="JavaScript" name="JavaScript" value="JavaScript" checked />
    <label>JavaScript</label> <br>

    <input type="checkbox" id="Python" name="Python" value="Python" />
    <label>Python</label> <br>

    <input type="checkbox" id="PHP" name="PHP" value="PHP" />
    <label>PHP</label>
</form>

<br>

## CSS

### Media Queries And Responsive Designs


<div class="cards">
    <div class="card card1">1</div>
    <div class="card card2">2</div>
    <div class="card card3">3</div>
    <div class="card card4">4</div>
</div>

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


.cards {
    margin: 80px;
    display: flex;
    justify-content: center;
    gap: 20px;
}


.cards .card {
    width: 200px;
    height: 200px;
    color: #FFF;
    font-size: 50px;
    background-color: darkslateblue;
}

/* @media Condition {} */

@media (max-width:600px) {
    .cards {
        flex-direction: column;
        align-items: center;
    }

    .cards .card {
        width: 300px;
        height: 300px;
        background-color: rgb(142, 30, 118);
    }

}

@media (min-width:600px) {
    .cards .card {
        background-color: rgb(29, 18, 26);
    }

}

#### Breakpoints

/* Mobile */
@media (max-width: 767px) {
}

/* Small Screens */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Medium Screens */
@media (min-width: 992px) {
    
}

/* Large Screens */
@media (min-width: 1200px) {
}

### Example

<div class="cards">
    <div class="card card1">1</div>
    <div class="card card2">2</div>
    <div class="card card3">3</div>
    <div class="card card4">4</div>
</div>


<div class="hero-section">
    <h1>Lorem ipsum dolor</h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quas asperiores hic? Facilis suscipit fugit
        similique deleniti soluta? Voluptate animi veniam voluptas tenetur hic eligendi temporibus doloribus commodi
        ducimus inventore? Ut sit illo porro quibusdam numquam beatae ex? Unde nostrum fugit, recusandae blanditiis
        exercitationem accusamus. Nostrum aliquid explicabo facilis. Ea repellat porro, et autem sint nostrum ad
        harum
        incidunt in quos. Quos quisquam non obcaecati ipsum veritatis dolore animi aspernatur corrupti autem
        voluptatum
        adipisci, porro fuga praesentium sit, id, deserunt facilis. Corporis, quis tempore! Et, perspiciatis esse
        quas
        iusto minima amet inventore praesentium totam neque obcaecati reprehenderit natus nulla quaerat!
    </p>
</div>

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

.cards {
    margin: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
    /* background-color: rgb(9, 111, 111); */
}

.cards .card {
    width: 200px;
    height: 200px;
    color: #FFF;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkslateblue;
}


.hero-section {
    margin: 50px 100px;
    background-color: antiquewhite;
    padding: 30px;
}

h1 {
    font-size: 50px;
}

p {
    font-size: 25px;
    line-height: 1.6;
}

/* Mobile */
@media (max-width: 767px) {
    .cards {
        flex-direction: column;
        align-items: center;
    }

    .cards .card {
        width: 100%;
        height: 500px;
    }

    .hero-section {
        margin: 100px 10px;
    }

    .hero-section p {
        font-size: 30px;
        line-height: 1.6;
    }
}

/* Small Screens */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Medium Screens */
@media (min-width: 992px) {
    
}

/* Large Screens */
@media (min-width: 1200px) {
}

<br >

### Challenge


> **Figma**
>https://www.figma.com/file/Tgy1BOcj7rXHgaQ45gkYNi/Untitled?node-id=0%3A1

<br><br>

## Javascript

### var, let, const

// var -> globale scope
// let -> block scope
// const -> block scope

console.log(d);
if (true) {
  var d = 100;
  console.log(d);
}
console.log(d);

function printName() {
  var name = "Ahmed";
  console.log(name);
}
// console.log(name); // Error
printName();

### Functions

function functionName(parameters) {
  // code to be executed
}

function sum(a, b) {
  console.log(a + b);
}

sum(10, 10);

### Anonymous Functions

var sum = function (a, b) {
  return a + b;
};

console.log(sum(10, 10));

### Arrow Functions

const sum = (a, b) => a + b;
console.log(sum(10, 2));

<br>

### Objects

const userName = 'ahmed';

const user = {
  id: 1,
  name: "ahmed",
  age: 25,
  sayHi: function () {
    return "Hey There";
  },
};

console.log(user.name);
console.log(user.sayHi());

let myVar = "gender";

const user = {
  name: "ahmed",
  "country of": "Iraq", // Bracket Notation
  gender: "male",
};

console.log(user.name);
console.log(user["name"]); // Bracket Notation
console.log(user["country of"]);
console.log(user[myVar]);

### Spread Operators

const oldArray = [1, 2, 3, 4];
const newArray = [...oldArray, 5, 6];
console.log(newArray);

// ----------------------------------

const info = {
  id: 1,
  name: "ahmed",
  // age: 25,
};
console.log({ ...info, age: 50 });

// ----------------------------------

const info2 = {
  ...info,
  id: 2,
  name: "lion",
};
console.log(info2);

### Document Object Model (DOM)


<br>

#### DOM Selectors

<div class="box">Box1</div>
<div class="box">Box2</div>


<div class="container">
    <span class="span1" id="spanOne">span1</span>
    <span>span2</span>
</div>


<form action="">
    <input type="text" name="" id="">
</form>
<form action="">
    <input type="text" name="" id="">
</form>

let byID = document.getElementById("spanOne");
let byTagName = document.getElementsByTagName("span");
let byClassName = document.getElementsByClassName("box");
let querySelector = document.querySelector(".box");
let querySelectorAll = document.querySelectorAll(".box");

console.log(byID);
console.log(byTagName[1]);
console.log(byClassName[1]);
console.log(querySelector);
console.log(querySelectorAll);

console.log(document.title);
console.log(document.body);
console.log(document.forms);

<br>

#### Image

<img>

const img = document.querySelector("img");

// image
img.src = "https://kitcat.com.sg/wp-content/uploads/2020/07/Kit-Cat.png";
img.alt = "cat";
img.width = "200";

<br>

#### Events (onclick)

<button onclick="() => console.log('click')">Button</button>
<button onclick="sayHi()">sayHi</button>
<button id="button1">Click</button>

function sayHi() {
  console.log("Hi");
}

// sayHi();

// -----------------------------------------------------------------------------

let button1 = document.getElementById("button1");

function changeBackground() {
  document.body.style.backgroundColor = "green";
}

// button1.innerText = "C";
// button1.innerHTML = `<p>Click</p>`;

// button1.onclick = () => (document.body.style.backgroundColor = "green");
// button1.onclick = () => changeBackground();

button1.onclick = () => (document.body.style.backgroundColor = "orange");
button1.onclick = () => (button1.style.backgroundColor = "#ca3e47");
button1.onclick = () => (button1.style.border = "none");

#### addEventListener

button1.addEventListener(
  "click",
  () => (button1.style.backgroundColor = "#ca3e47")
);

button1.addEventListener("click", () => (button1.style.color = "#FFF"));
button1.addEventListener("click", () => (button1.style.border = "none"));
button1.addEventListener("click", () => (button1.style.width = "100px"));

<br>

#### Events

let btn = document.getElementById("btn");

onmouseover
btn.onmouseover = function () {
  document.body.style.backgroundColor = "red";
};

onmousedown
btn.onmousedown = function () {
  document.body.style.backgroundColor = "red";
};

onmouseleave
btn.onmouseleave = function () {
  document.body.style.backgroundColor = "red";
};

#### Form
##### onsubmit

<!-- <form onsubmit="sayHi()">
    <input type="text" placeholder="firstName" id="firstName">
    <input type="submit">
</form> -->

<form>
    <input type="text" placeholder="firstName" id="firstName">
    <input type="submit">
</form>

let firstName = document.getElementById("firstName");
let form = document.querySelector("form");

function sayHi() {
  alert("Hi : " + firstName.value);
}

// ------------------------------------------------------

form.addEventListener("submit", sayHi);