Code Monkey home page Code Monkey logo

layout_calendar's Introduction

Calendar

Replace <your_account> with your Github username and copy the links to Pull Request description:


Follow this instructions

  • Write styles in src/styles/main.scss instead of src/style.css.
  • This task does not have tests so you need to check if it works as expected manually.

❗️❗️❗️ DON'T FORGET TO PROOFREAD YOUR CODE WITH CHECKLIST BEFORE SENDING YOUR PULL REQUEST❗️❗️❗️

Task

Display a calendar in the middle of the screen. Use SCSS and follow BEM. Don't use JS.

  • Create a markup for the calendar block with 31 days inside
    • DON'T add numbers in HTML (you will do it using CSS)
  • Each day is a grey (#eee) 100px square (including 1px black border)
    • Add a number (Arial 30px) in the center of each day using ::before and @for
  • Use flex with 1px gap and limit its width to exactly 7 columns + 10px paddings
    • Don't use hardcoded px values if they are used several times
    • Use properly named variables to make all the calculations more clear.
  • Implement start-day modifier for the calendar with mon, tue, wed, thu, fri, sat and sun values
    • Use @each to create all the modifiers
    • The month should start at the correct column (Monday is the 1st, Friday is the 5th)
    • You can just add correct margin-left for the first day
  • Add a modifier month-length for the calendar with values 28, 29, 30 and 31 (use @for)
    • It sets the last day to show (use nth-child)
  • On hovering over a cell, the cursor should become pointer.
  • The hovered cell has to become pink
    • (Optional) Move it up by 20px (use transform)
    • (Optional) both of these properties are to be animated with the duration of half a second.

--> CHECKLIST

Here is a preview:

reference image.

layout_calendar's People

Contributors

mgrinko avatar yuriiholiuk avatar oleksiiblezniuk avatar vladimir-beliy avatar olexandr6 avatar vinniej-2k20 avatar danheim avatar danmysak avatar irenhh avatar solaryasha avatar denys-cheporniuk avatar ihor-karpyn avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.