---
# System prepended metadata

title: Untitled

---

## HTML

### Form 
```html
<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, 
```html
<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>
```
```css
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
```html
<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
```html
<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

![](https://i.imgur.com/eR9uOWR.jpg)


```html
<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>
```
```css
* {
    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 
```css
/* 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 
```html
<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>
```
```css
* {
    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

![](https://i.imgur.com/byFpgQS.png)

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

<br><br>


## Javascript

### var, let, const
```javascript
// 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

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

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

sum(10, 10);
```

### Anonymous Functions
```javascript
var sum = function (a, b) {
  return a + b;
};

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

### Arrow Functions
```javascript
const sum = (a, b) => a + b;
console.log(sum(10, 2));
```
<br> 

### Objects
```javascript
const userName = 'ahmed';

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

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

```javascript
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
```javascript
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)

![](https://i.imgur.com/uyNypL0.gif)



<br>

#### DOM Selectors
```html
<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>
```
```javascript
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>
```
```javascript
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)

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

```javascript
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

```javascript
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 

```javascript
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

```html
<!-- <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>

```

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

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

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

form.addEventListener("submit", sayHi);
```