kozhemyakin · kozhemyakin · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 # rsschool-cv
 
-Shelter task: https://kozhemyakin.github.io/rsschool-cv/shelter/
+Markdown CV: https://kozhemyakin.github.io/rsschool-cv/cv
+
+Html&CSS&JS CV: https://kozhemyakin.github.io/rsschool-cv
diff --git a/cv.md b/cv.md
@@ -0,0 +1,28 @@
+## CV:
+
+![kozhemyakin sergey](https://avatars.githubusercontent.com/u/19146069?s=96&v=4 "kozhemyakin sergey")
+
+1. Kozhemyakin Sergey
+2. Discord - kozhemyakin, email - [email protected]
+3. I want to learn JS and React and try to find a job as a Frontend developer
+4. Stack: JS, React, Redux, Git, VS Code, Cypress
+5. Code example: 
+```
+function getCount(str) {
+  let i = 0;
+  
+  const strArr = str.split('');
+  
+  strArr.forEach(letter => {
+    if (letter === 'a' || letter === 'e' || letter === 'i' || letter === 'o' || letter === 'u'){
+      i++
+    }
+    return i
+  })
+  
+  return i;
+}
+```
+6. My diploma project(TMS react 2022) on React: https://github.com/kozhemyakin/tms-diploma
+7. At 2013 I graduated from QA courses at EPAM. At 2022 I graduated from Frontend Developer(React) courses at teachmeskills. At 2023 i have finished RSS-JS/PreQ42022 course.
+8. English level - B1
diff --git a/images/code.jpeg b/images/code.jpeg
diff --git a/images/logo.svg b/images/logo.svg
diff --git a/images/photo1.jpeg b/images/photo1.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <title class="title-test-class">Заголовок</title>
+  </head>
+  <body>Страница</body>
+</html>
diff --git a/minesweeper/index.html b/minesweeper/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>kozhemyakin - minesweeper</title>
+  <link rel="stylesheet" href="./styles.css"></link>
+</head>
+<body>
+</body>
+<script src="./index.js" charset="utf-8"></script>
+</html>
diff --git a/minesweeper/index.js b/minesweeper/index.js
@@ -0,0 +1,157 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const containerDiv = document.createElement('div');
+  const gridDiv = document.createElement('div');
+  const resultsDiv = document.createElement('div');
+  document.body.appendChild(containerDiv);
+  containerDiv.setAttribute("class", "container");
+  gridDiv.setAttribute("class", "grid");
+  resultsDiv.setAttribute("class", "results");
+  containerDiv.appendChild( gridDiv );
+  containerDiv.appendChild( resultsDiv );
+  let height = 10
+  let bombsQty = 10
+  let flags = 0
+  let cells = []
+  let isOver = false
+  const grid = document.querySelector('.grid')
+  const result = document.querySelector('.results')
+
+  function createBoard() {
+    const allBombs = Array(bombsQty).fill('bomb')
+    const emptyBombs = Array(height*height - bombsQty).fill('valid')
+    const currentSquare = emptyBombs.concat(allBombs)
+    const randomBombs = currentSquare.sort(() => Math.random() -0.5)
+
+    for(let i = 0; i < height*height; i++) {
+      const square = document.createElement('div')
+      square.setAttribute('id', i)
+      square.classList.add(randomBombs[i])
+      grid.appendChild(square)
+      cells.push(square)
+
+      square.addEventListener('click', function(e) {
+        click(square)
+      })
+
+      square.oncontextmenu = function(e) {
+        e.preventDefault()
+        addFlag(square)
+      }
+    }
+
+    for (let i = 0; i < cells.length; i++) {
+      let total = 0
+      const isLeftEdge = (i % height === 0)
+      const isRightEdge = (i % height === height -1)
+
+      if (cells[i].classList.contains('valid')) {
+        const addBombCountIfValid = (index) => {
+            if (cells[index].classList.contains('bomb')) {
+              total ++
+            }
+        }
+
+        if (i > 0 && !isLeftEdge) addBombCountIfValid(i - 1)
+        if (i > 9 && !isRightEdge) addBombCountIfValid(i + 1 -height)
+        if (i > 10) addBombCountIfValid(i - height)
+        if (i > 11 && !isLeftEdge) addBombCountIfValid(i - 1 -height)
+        if (i < 98 && !isRightEdge) addBombCountIfValid(i + 1)
+        if (i < 90 && !isLeftEdge) addBombCountIfValid(i - 1 +height)
+        if (i < 88 && !isRightEdge) addBombCountIfValid(i + 1 +height)
+        if (i < 89) addBombCountIfValid(i + height)
+
+        cells[i].setAttribute('data', total)
+      }
+    }
+  }
+  createBoard()
+
+  function addFlag(square) {
+    if (isOver) return
+    if (!square.classList.contains('checked') && (flags < bombsQty)) {
+      if (!square.classList.contains('flag')) {
+        square.classList.add('flag')
+        square.innerHTML = ' 🚩'
+        flags ++
+
+        checkForWin()
+      } else {
+        square.classList.remove('flag')
+        square.innerHTML = ''
+        flags --
+
+      }
+    }
+  }
+
+function click(square) {
+    let currentId = square.id
+    if (isOver) return
+    if (square.classList.contains('checked') || square.classList.contains('flag')) return
+    if (square.classList.contains('bomb')) {
+      gameOver(square)
+    } else {
+      let total = square.getAttribute('data')
+      if (total !=0) {
+        square.classList.add('checked', (total == 1 ? 'one' : (total == 2 ? 'two' : (total == 3 ? 'three' : 'four'))))
+        square.innerHTML = total
+        return
+      }
+      checkSquare(square, currentId)
+    }
+    square.classList.add('checked')
+}
+
+
+function checkSquare(square, currentId) {
+  const directions = [-1, 1, -height, height, -height -1, -height +1, height -1, height +1]
+  const isLeftEdge = (currentId % height === 0)
+  const isRightEdge = (currentId % height === height -1)
+
+  setTimeout(() => {
+    for (let i = 0; i < directions.length; i++) {
+      const direction = directions[i]
+      const newId = parseInt(currentId) + direction
+      const newSquare = document.getElementById(newId)
+
+      if (newSquare && !newSquare.classList.contains('checked')) {
+        const newIdX = newId % height
+        const newIdY = Math.floor(newId / height)
+        const currentIdX = currentId % height
+        const currentIdY = Math.floor(currentId / height)
+        const isAdjacent = Math.abs(newIdX - currentIdX) <= 1 && Math.abs(newIdY - currentIdY) <= 1
+
+        if (isAdjacent) {
+          click(newSquare)
+        }
+      }
+    }
+  }, 10)
+}
+
+
+  const gameOver = square => {
+    result.innerHTML = 'BOOM! Game Over!'
+    isOver = true
+
+    document.querySelectorAll('.bomb').forEach(bomb => {
+      bomb.innerHTML = '💣'
+      bomb.classList.remove('bomb')
+      bomb.classList.add('checked')
+    })
+}
+
+function checkForWin() {
+  let matches = 0
+
+    for (let i = 0; i < cells.length; i++) {
+      if (cells[i].classList.contains('flag') && cells[i].classList.contains('bomb')) {
+        matches ++
+      }
+      if (matches === bombsQty) {
+        result.innerHTML = 'YOU WIN!'
+        isOver = true
+      }
+    }
+  }
+})
diff --git a/minesweeper/styles.css b/minesweeper/styles.css
@@ -0,0 +1,69 @@
+.container {
+  width: 500px;
+  align-content: center;
+}
+
+.grid {
+  height: 400px;
+  width: 400px;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #dcd6bc;
+  margin-left: 50px;
+  margin-top: 20px;
+  border: 10px solid #dcd6bc;
+  margin-bottom: 10px;
+}
+
+.results {
+  margin-top: 5px;
+  color: #e76346;
+}
+
+div {
+  font-size: 25px;
+  text-align: center;
+  font-family: 'Roboto Mono', monospace;
+
+}
+.valid {
+  height: 40px;
+  width: 40px;
+  border: 5px solid;
+  border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
+  box-sizing: border-box;
+}
+
+.checked {
+  height: 40px;
+  width: 40px;
+  border: 2px solid;
+  background-color: #cecab7;
+  border-color: #9c998d;
+  box-sizing: border-box;
+}
+
+.bomb {
+  height: 40px;
+  width: 40px;
+  border: 5px solid;
+  border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
+  box-sizing: border-box;
+}
+
+.one {
+  color: #e76346;
+}
+
+.two {
+  color: #4199d3;
+}
+
+.three {
+  color: #57da59;
+}
+
+.four{
+  color: #bb41d3;
+}
+
diff --git a/scripts/switchTheme.js b/scripts/switchTheme.js
@@ -0,0 +1,15 @@
+function switchTheme() {
+  if(!document.querySelector('.myClass')) {
+    document.getElementById("switchButton").classList.add('myClass');
+    document.querySelector('body').style.background = '#f6f8e7';
+    document.querySelector('body').style.color = '#202023';
+    document.querySelector('.hello').style.background = '#f6f8e7';
+    document.querySelector('.code').style.background = '#f6f8e7';
+  } else {
+    document.getElementById("switchButton").classList.remove('myClass');
+    document.querySelector('body').style.background = '#202023';
+    document.querySelector('body').style.color = '#ffffeb';
+    document.querySelector('.hello').style.background = '#424242';
+    document.querySelector('.code').style.background = '#564949';
+  }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,3 @@
+.title-test-class {
+    background-color: aliceblue;
+}
diff --git a/styles/reset.css b/styles/reset.css
@@ -0,0 +1,66 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Added */
+a, a:visited {
+  text-decoration: none;
+  color:unset
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,230 @@
+body {
+    color: #ffffeb;
+    font-size: 16px;
+    font-family: 'M PLUS Rounded 1c', sans-serif;
+    font-weight: 500;
+    background: #202023;
+}
+
+/* HEADER */
+
+.navigation {
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+    padding: 3px;
+    background: #20202380;
+    backdrop-filter: blur(10px);
+}
+
+.nav-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px;
+    max-height: 50px;
+}
+
+.container {
+    max-width: 768px;
+    margin: 0 auto;
+}
+
+.nav-logo {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.logo__img {
+    background-image: url(https://avatars.githubusercontent.com/u/19146069?v=4);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 30px;
+    width: 30px;
+    border-radius: 15px;
+    padding: 5px auto;
+}
+
+.nav-logo__text {
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.nav-links {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    flex-basis: 50%;
+    gap: 20px;
+    font-weight: 700;
+    line-height: 30px;
+    position: relative;
+}
+
+.nav-links__link:hover::after {
+    content: "";
+    display: block;
+    border: 1px solid #FBD38D;
+    background-color: #FBD38D;
+    width: 100%;
+}
+
+.fa-github {
+    margin-top: 3px;
+}
+
+.nav-switcher, .nav-mobile-menu {
+    background-color: #FBD38D;
+    border: 1px solid #FBD38D;
+    border-radius: 3px;
+    height: 30px;
+    width: 30px;
+    padding: 3px;
+    cursor: pointer;
+}
+
+.nav-switcher:hover {
+    background-color: #ecbc67;
+    border: 1px solid #ecbc67;
+}
+
+.switcher__icon, .nav-mobile-menu__icon {
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 20px;
+    width: 20px;
+    margin: 0 auto;
+}
+
+.nav-mobile-menu {
+    display: none;
+}
+
+/* MAIN */
+.main-container {
+    max-width: 572px;
+    padding: 57px 8px 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.hello {
+    background-color: #424242;
+    border: 1px solid #424242;
+    border-radius: 5px;
+    text-align: center;
+    padding: 12px;
+    margin-bottom: 24px;
+}
+
+.heading {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.my-name {
+    line-height: 50px;
+}
+
+.heading__photo {
+    background-image: url(../images/photo1.jpeg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: saturate(20%);
+    height: 100px;
+    width: 100px;
+    border-radius: 50px;
+}
+
+h2 {
+    font-size: 36px;
+}
+
+h3 {
+    font-size: 20px;
+    margin: 12px 0;
+}
+
+.subarticle-title::after {
+    content: "";
+    display: block;
+    border: 2px solid #424242;
+    background: #424242;
+    width: 60px;
+}
+
+.social-icons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    font-size: 10vh;;
+}
+
+.copyrights {
+    color: #898181;
+    text-align: center;
+    font-size: 14px;
+    padding: 16px 0;
+}
+
+.code {
+    width: 100%;
+    height: 400px;
+    border: 1px dashed #ecbc67;
+    text-align: center;
+    /* padding: 38% 0; */
+    background-color: #564949;
+    opacity: 0.5;
+    margin-bottom: 12px;
+
+}
+
+@media screen and (max-width: 767px) {
+    .nav-links {
+        display: none;
+    }
+
+    .nav-mobile-menu {
+        display: block;
+    }
+
+    .nav-right-buttons {
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+    }
+
+    .heading {
+        flex-direction: column-reverse;
+        align-items: center;
+    }
+
+    .heading__photo {
+        height: 300px;
+        width: 300px;
+        border-radius: 150px;
+    }
+
+    .my-name {
+        text-align: center;
+    }
+}
+
+.myClass {
+    background-color: gray;
+    color: white;
+    border: 1px solid #7f7e7d;
+    border-radius: 3px;
+    height: 30px;
+    width: 30px;
+    padding: 3px;
+    cursor: pointer;
+}
+
+.myClass:hover {
+    background-color: #2a1e0a;
+    border: 1px solid #1b1650;
+}