Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to Clorox UI-Prototype - I | Home, People, Human & Strategy challenge. In this challenge, we are looking for you to create a new SharePoint website using old school HTML, Javascript & SCSS.

Let us know any question you have!

General requirements

  • Sharepont latest version.
  • Gulp
  • SCSS
  • HTML
  • JavaScript

General requirements

Layout

  • Layout: Page should be fluid.
  • Desktop: Beyond storyboard width, content should be centered & background should be fluid.
  • Tablet: Out of scope. Up to 648px you can show the horizontal scrollbar if the browser width is lesser than storyboard width.
  • Mobile: 375px to 648px Use your best judgment to make the sections fit on a mobile screen. There won't be any score-down as long as the sections don't break the layout on a mobile screen.
  • Focus on consistency. It's acceptable to do minor layout adjustment if the storyboard isn't consistent.

Framework-specific

  • Don NOT use any framework like ReactJS, AngularJS, etc.
  • JQuery is allowed. Please confirm the plugins you are going to use in the forum. Basically, all MIT licensed libs are allowed
  • SCSS is a must.
  • Use the SharePoint framework based submission in the forum as the base of your submission.
  • All data should be hardcoded in the code. JSON is NOT required.
  • Create components based layout.

Code Formatting

  • Please use clean INDENTATION for all HTML code so future developers can follow the code.
  • Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
  • Use appropriate linters to validate your code.

HTML Specific

  • HTML should be valid HTML5 compliant.
  • All HTML code naming should not have any conflicts or errors.
  • Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)
  • Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
  • No inline CSS styles- all styles must be placed in an external stylesheet.

CSS Specific

  • Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
  • You may use SCSS in the project.

Javascript

  • The JS code should pass EsLint vaidation.

Platform

  • Desktop: Chrome latest, Firefox latest (Mac & Windows), safari latest (Mac), IE11+ (Windows)
  • Mobile: Chrome latest, Safari latest.

Application requirement

  • All the data in the application should be hardcoded.
  • Create components of different sections.

0 Resources & links

1.Home

1.1 Edit quick link modal

1.2 Edit TO-DOs modal

2. People

3.Human

4. Strategy

5. Verification

  • Submit a verification video or verification document for each of the implemented page.


Final Submission Guidelines

  • Full source code with all the requirements implemented.
  • Detailed readme in markdown format that describes how to configure, build and run the app.
  • Verification document or link to the verification video.

Licenses & attribution

  • Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok. If a library is not commercial friendly you will need to get our approval first.
  • Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

FAQs

After submission as a submitter what should be my next step?

Once the challenge submission phase is over the assigned reviewers are going to review all the submissions based on the challenge scorecard. They are expected to raise all issues found in the submissions they are reviewing. After the completion of review phase the Appeal phase statss. In this phase, the submitters should go to the Online Review page, select the project & have a look at the issues raised by the reviewers. If you disagree with the reviewer on any issue/comment, raise an appeal by clicking the 'Appeal' button associated with the section and entering the appeal comment.

When & where I can see the challenge results?

After the Appeal response phase is over the results are displayed on the challenge specification page as well as on the online reivew page.

ELIGIBLE EVENTS:

Topcoder Open 2019

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30093232