All Problems Fixed

loverdeveloper · May 17, 2019 · 4f13d9c · 4f13d9c
1 parent 57d2bef
commit 4f13d9c
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 23 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/App.css b/src/App.css
@@ -262,7 +262,21 @@ input[type="text"]:focus {
  text-align: center;
  position: absolute;
  z-index: 1000;
+ transition: ease-in-out 500ms;
 }
 .winnerImg{
  max-width: 200px;
-}
+ animation: spin 4s;
+}
+.noSelect{
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE10+/Edge */
+ user-select: none; /* Standard */
+}
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+@-moz-keyframes btnSpin { 100% { -moz-transform: rotate(345deg); } 0%{transform: rotate(-15deg)} }
+@-webkit-keyframes btnSpin { 100% { -webkit-transform: rotate(345deg); } 0%{transform: rotate(-15deg)} }
+@keyframes btnSpin { 100% { -webkit-transform: rotate(345deg); transform:rotate(345deg); } 0%{transform: rotate(-15deg)}}
diff --git a/src/App/screens/Main.js b/src/App/screens/Main.js
@@ -10,6 +10,7 @@ function Main() {
  let [loading,setLoading] = useState(true);
  let [lotted,setLotted] = useState(false);
  let [winner,setWinner] = useState(null);
+ let [justFun,setJustFun] = useState(null);
 
  useEffect(() => {
  console.log(listItems)
@@ -21,6 +22,29 @@ function Main() {
  delete listItems[index];
  setListItems(listItems);
  }
+ function shuffle() {
+ let currentIndex = listItems.length, temporaryValue, randomIndex;
+
+ // While there remain elements to shuffle...
+ while (0 !== currentIndex) {
+
+ // Pick a remaining element...
+ randomIndex = Math.floor(Math.random() * currentIndex);
+ currentIndex -= 1;
+
+ // And swap it with the current element.
+ temporaryValue = listItems[currentIndex];
+ listItems[currentIndex] = listItems[randomIndex];
+ listItems[randomIndex] = temporaryValue;
+ }
+
+ setListItems(listItems);
+ setListItems(listItems);
+ console.log(listItems);
+ setJustFun(Math.random());
+ console.log(nameInput);
+ return 0;
+ }
 
  function lottery() {
  let number = Math.floor((Math.random() * listItems.length) + 1);
@@ -65,7 +89,7 @@ function Main() {
  <div className="col">
  <div className="row">
  <div className="col-4">
- <div className="bot" onClick={lottery}>
+ <div className="bot" style={{"animation":"btnSpin 4s"}} onClick={lottery}>
  <FontAwesomeIcon className="d-block mx-auto" icon="play"/>
  </div>
  </div>
@@ -101,6 +125,10 @@ function Main() {
  <div className="row">
  <div className="col d-none d-md-block"></div>
  <div className="col-6">
+ <div onClick={shuffle} className="text-muted p-3 pointer">
+ <p className="float-right noSelect"> بهم ریختن اسامی لیست 😃</p>
+ <FontAwesomeIcon icon="sync-alt"/>
+ </div>
  <div className="items d-block mx-auto">
  {listItems.map((arr,index)=>{
  return arr!=null? (
@@ -114,7 +142,7 @@ function Main() {
  </div>
  <div className="col">
  <a className="text-danger m-2 pointer" key={index} onClick={(key)=>{listItems.splice(index,1);
- console.log(listItems);setListItems(listItems);console.log(listItems)}}>
+ console.log(listItems);setListItems(listItems);setJustFun(Math.random())}}>
  <FontAwesomeIcon icon="trash-alt"/>
  </a>
  </div>
@@ -132,7 +160,7 @@ function Main() {
  <div className="col-3 d-none d-md-block"></div>
  </div>
  <div className="links">
- <p>Developed By <b>LoverDeveloper
+ <p>Developed By <b>@LoverDeveloper
  <br/>
  Available in <a href="http:https://github.com/loverdeveloper/lottery"><FontAwesomeIcon icon={['fab', 'github']}/> Github</a>
  </b></p>

diff --git a/src/index.js b/src/index.js
@@ -11,6 +11,7 @@ import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
 import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
+import { faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 
 library.add(faTrashAlt);
@@ -19,6 +20,7 @@ library.add(faCheck);
 library.add(faPlay);
 library.add(faWindowClose);
 library.add(fab);
+library.add(faSyncAlt);
 
 
 ReactDOM.render(