diff --git a/Exercise/app.js b/Exercise/app.js new file mode 100644 index 000000000..add2be042 --- /dev/null +++ b/Exercise/app.js @@ -0,0 +1,18 @@ +const app = Vue.createApp({ + data() { + return { + titleText: 'Hello Developer!', + quoteText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit', + contentText1: 'Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat', + contentText2: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', + contentText3: 'Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco', + buttonText: 'READ MORE', + firstName: 'Disha Patani', + contentImage: 'http://via.placeholder.com/400x300', + ComputerBanner: 'http://via.placeholder.com/1920x650', + MobileBanner: 'http://via.placeholder.com/600x600', + } + } +}) + +app.mount('#app') \ No newline at end of file diff --git a/Exercise/data.json b/Exercise/data.json new file mode 100644 index 000000000..a9bd62973 --- /dev/null +++ b/Exercise/data.json @@ -0,0 +1,18 @@ +[ + { + "title": "Section 1", + "content": "

Maecenas nec semper ante, pellentesque posuere lorem. Nullam ipsum massa, consequat eget urna ut, pulvinar dignissim lorem. Nulla facilisi. Nam mattis eleifend metus. Fusce at commodo lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pellentesque elit sem, vel blandit posuere.

" + }, + { + "title": "Section 2", + "content": "

Mauris a orci sodales, scelerisque velit vitae, gravida nisl. Ut non laoreet eros, vel laoreet nisi. Praesent sed dolor dui. Proin non fringilla quam. Aliquam erat volutpat. Vestibulum vel arcu semper, lobortis turpis ac, ultricies nisi. Praesent id.

" + }, + { + "title": "Section 3", + "content": "

Sed elementum sapien ut sapien imperdiet, eu venenatis enim rhoncus. Praesent euismod tincidunt rhoncus. Duis cras amet:

" + }, + { + "title": "Section 4", + "content": "

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

" + } +] \ No newline at end of file diff --git a/Exercise/exercise1.html b/Exercise/exercise1.html new file mode 100644 index 000000000..d818779db --- /dev/null +++ b/Exercise/exercise1.html @@ -0,0 +1,61 @@ + + + + + + + + Hello Developer! + + + +
+ +
+ Snow +
+ {{titleText}} +

{{quoteText}}

+
+

+
+ +
+
+
+ `${firstName}` +
+

{{contentText1}}

+
+
+ +
+
+
+ +
+
+ `${firstName}` +
+

{{contentText2}}

+
+ +
+
+ +
+
+ `${firstName}` +
+

{{contentText3}}

+
+ +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/Exercise/exercise2.html b/Exercise/exercise2.html new file mode 100644 index 000000000..6f6920d3b --- /dev/null +++ b/Exercise/exercise2.html @@ -0,0 +1,249 @@ + + + + + + + + + + + + + + + + + + +
+
+ + + +
+ +
+ +
+
+
+
+

+
+
+
+
+
+ +
+ +
+
+
+
+

+
+
+
+
+
+ +
+ +
+
+
+
+

+
+
+
+
+
+ +
+ +
+
+
+
+

+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/Exercise/index-css.css b/Exercise/index-css.css new file mode 100644 index 000000000..2423c29bc --- /dev/null +++ b/Exercise/index-css.css @@ -0,0 +1,107 @@ + + +body { + font-family: Segoe UI; + font-weight: normal; +} + +/*Style for header of the page*/ +.container { + position: relative; + text-align: center; + color: black; +} + +/*Below class shows the text in the middle*/ +.centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +font { + font-size:50px; + font-weight:bold; + color:white; +} + +.class-p { + font-size:20px; + font-weight:bold; + color:white; + letter-spacing: 2px; +} + +/* Float four columns side by side */ +.column { + float: left; + width: 25%; + padding: 0 10px; +} + +/* Remove extra left and right margins, due to padding */ +.row {margin: 0 -5px;} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Responsive columns */ +@media screen and (max-width: 900px) { + .column { + width: 90%; + display: block; + margin-bottom: 20px; + } + font { + font-size:20px; + } + .class-p { + font-size:10px; + } +} + +/* Responsive columns */ +@media screen and (max-width: 500px) { + .column { + width: 95%; + display: block; + margin-bottom: 20px; + } + font { + font-size:20px; + } + .class-p { + font-size:10px; + } +} + +/* Style the counter cards */ +.card { + border:1px solid #D3D3D3; + padding: 10px; +} +.card img { + width:90%; + height:auto; +} + +.card-content { + width: 100%; + height: 25%; +} + +/*Style for button*/ +button { + border: 2px solid black; + font-family: Segoe UI; + font-size: 14px; + color: #24292f; + letter-spacing: 5px; + padding: 15px; + border-radius: 50px; +} \ No newline at end of file diff --git a/readme.md b/readme.md index 6dd3ffb7c..96358f6b0 100644 --- a/readme.md +++ b/readme.md @@ -1,40 +1,23 @@ -Introduction ---- -Thanks for taking the time to complete this frontend technical assessment. We will be focusing on software quality (scalability, readability, maintainability, etc.) and your eye for detail. You may include any libraries, but Vue.js is preferred and jQuery is not recommended. Along with following best practices, bonus points for following our [coding guidelines](https://github.com/mindarc/frontend-assessment/wiki/Coding-guidelines). - -Exercise 1 ---- -Build a responsive page based on the designs. - -##### Requirements -1. Match the designs exactly. -2. Needs to be responsive. - -##### Designs -* exercise1-desktop.png -* exercise1-mobile.png - -##### Assets -* Desktop banner - http://via.placeholder.com/1920x650 -* Mobile banner - http://via.placeholder.com/600x600 -* Content images - http://via.placeholder.com/400x300 - -Exercise 2 ---- -Read the `data.json` file and display the data as tabs on desktop and an accordion on mobile. - -##### Requirements -1. Display data in tabs on desktop. -2. Display data in an accordion on mobile. -3. Only 1 accordion/tab should be open at a time. -4. Open the first accordion/tab on load. -5. If the open accordion is selected, close it. - -###### Bonus points -* Improve the user experience with meaningful animations/transitions. -* Design and styling. -* Explain why the result of `('b' + 'a' + + 'a' + 'a').toLowerCase()` is `banana`. - -Submission ---- -We recommend submitting your completed assessment as a forked repository. Please replace README content with instructions and relevant documentation. +Hello MindArc assessment team, This is forked respository contains folder name "Exercise" in which you will find "exercise1.html" and "exercise2.html" which you need to rum to evaluate my developer challange exercise. + +EXERCISE - 1 + +You can just run the exercise1.html file to see the output. + +EXERCISE - 2 + +If you need to run the exercise2.html file, you need to follow the below mentioned steps to see the output: + +NODE.JS + +1. Install http-server by typing "npm install -g http-server" +2. change into your working directory, the "exercise2.html" is located +3. start you http server by issuing "http-server -c-1". + +RUBY + +1. Run the server using following command "ruby -run -e httpd . -p 8080". + +PHP + +1. Run the server using following command "php -S localhost:8000".