refactor: use "class" instead of "className" attr

preactjs/preact#103
javascript-questions · Sep 25, 2019 · b324f3d · b324f3d
1 parent 7d3222c
commit b324f3d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/src/components/Drawer.js b/src/components/Drawer.js
@@ -2,7 +2,7 @@ import { h } from 'preact';
 import Logo from './Logo';
 
 const Drawer = ({ updatedAt }) => (
-	<details className="Drawer">
+	<details class="Drawer">
     <summary>
       <div>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>

diff --git a/src/components/Intro.js b/src/components/Intro.js
@@ -2,11 +2,11 @@ import { h } from 'preact';
 import Logo from './Logo';
 
 const Intro = () => (
-	<div className="Intro">
+	<div class="Intro">
     <Logo size={150} />
     <h1>JavaScript Questions</h1>
     <p>From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview.</p>
-    <a href="/#1" className="Button width-full">Start</a>
+    <a href="/#1" class="Button width-full">Start</a>
     <p>
       <a href="https://github.com/andreruffert/javascript-questions">PWA</a> build by{' '}
       <a href="https://github.com/andreruffert">André Ruffert</a>,{' '}

diff --git a/src/components/QuestionHeader.js b/src/components/QuestionHeader.js
@@ -1,7 +1,7 @@
 import { h } from 'preact';
 
 const QuestionHeader = ({ question }) => (
-	<header className="QuestionHeader">
+	<header class="QuestionHeader">
     <h2>{question.title}</h2>
 	</header>
 );

diff --git a/src/index.js b/src/index.js
@@ -75,19 +75,19 @@ export default class App extends Component {
     const userAnswer = userAnswers.find(answer => answer.questionId === questionId);
 
     if (!questionId) return <div><Intro /><Drawer updatedAt={questionsUpdatedAt} /></div>;
-    if (!question) return <div className="app-shell"><LoadingActivity /></div>;
+    if (!question) return <div class="app-shell"><LoadingActivity /></div>;
 
 		return (
-      <div className="app-shell">
+      <div class="app-shell">
         <Drawer updatedAt={questionsUpdatedAt} />
         <main>
           <QuestionHeader question={question} />
-          <div className="Box">
-            <pre className="Box-header" dangerouslySetInnerHTML={{__html: question.code}} />
+          <div class="Box">
+            <pre class="Box-header" dangerouslySetInnerHTML={{__html: question.code}} />
             <ul>
               {question.choices.map((choice, choiceId) => (
                 <li
-                  className="Box-row Box-row--hover-gray"
+                  class="Box-row Box-row--hover-gray"
                   dangerouslySetInnerHTML={{__html: snarkdown(choice)}}
                   data-selected={userAnswer && userAnswer.choiceId === choiceId}
                   onClick={() => {
@@ -97,13 +97,13 @@ export default class App extends Component {
                 />
               ))}
             </ul>
-            {revealAnswer && <div className="Box-row" dangerouslySetInnerHTML={{__html: snarkdown(question.answer)}} />}
+            {revealAnswer && <div class="Box-row" dangerouslySetInnerHTML={{__html: snarkdown(question.answer)}} />}
           </div>
 
           <div class="Pagination">
-            <a href={`/#${questionId - 1}`} className="Button Button--purple" rel="prev" disabled={questionId === 1}>Prev</a>
+            <a href={`/#${questionId - 1}`} class="Button Button--purple" rel="prev" disabled={questionId === 1}>Prev</a>
             <small><i>{questionId} of {totalQuestions}</i></small>
-            <a href={`/#${questionId + 1}`} className="Button Button--purple" rel="next" disabled={questionId === totalQuestions}>Next</a>
+            <a href={`/#${questionId + 1}`} class="Button Button--purple" rel="next" disabled={questionId === totalQuestions}>Next</a>
           </div>
         </main>
       </div>